<template>
	<view class="page">
		<custom-navigation :title="title">
		</custom-navigation>

		<view class="head-contaienr" v-if="info!=null">
			<view class="item flex-row-center">
				<view class="value">调价单号：{{info.modify_price_no}}</view>
				<view :class="info.type=='已提交'?'bluebtn':'redbtn'">{{info.type}} </view>
			</view>
			<view class="item flex-row-center">
				<view class="value">创建时间：{{info.create_time}}</view>
			</view>
		</view>

		<view class="head-item flex-row-center" @click="remarkDialogShow=true">
			<view class="title1">调价备注</view>
			<view class="value u-line-2">{{remark}}</view>
			<image src="/static/arrow-blackmin.png"></image>
		</view>

		<view class="head-item flex-row-center">
			<view class="title">商品明细</view>
			<view class="add-goods" @click="$navigateTo('/pages/goods/goods_info?selectMode=true')">选择商品</view>
		</view>


		<scroll-view scroll-y="true" class="body-scroll" style="margin-top: 20rpx;">
			<view class="item-view" v-for="(item,index) in goodsList" @click="itemOnClick(item)">
				<view class="flex-row-center" style="flex: 1;">
					<view class="name" style="flex: 1;margin: 4rpx 0;">{{item.goods_name}}</view>
					<view>新进货价：¥<text style=" ">{{item.new_purchase_price}}</text></view>
				</view>

				<view class="flex-row-center" style="flex: 1;">
					<view style="flex: 1; margin: 4rpx 0;">{{item.goods_barcode}}</view>
					<view>新零售价：¥<text style=" ">{{item.new_sale_price}}</text></view>
				</view>

				<view class="flex-row-center" style="margin-top: 4rpx;"
					v-if="item.allow_member_price=='允许' && (goodsMemberLevelNameObj[item.goods_no] && goodsMemberLevelNameObj[item.goods_no].member_one_state=='启用')">
					<view style="flex: 1;margin: 4rpx 0;"> {{ }}</view>
					<view>
						{{goodsMemberLevelNameObj[item.goods_no] && goodsMemberLevelNameObj[item.goods_no].member_one_name}}：¥{{item.new_member_one}}
					</view>

				</view>
				<view class="flex-row-center" style="margin-top: 4rpx;"
					v-if="item.allow_member_price=='允许' && (goodsMemberLevelNameObj[item.goods_no] && goodsMemberLevelNameObj[item.goods_no].member_two_state=='启用')">
					<view style="flex: 1;margin: 4rpx 0;"> {{ }}</view>
					<view>
						{{goodsMemberLevelNameObj[item.goods_no] && goodsMemberLevelNameObj[item.goods_no].member_two_name}}：¥{{item.new_member_two}}
					</view>

				</view>
				<view class="flex-row-center" style="margin-top: 4rpx;"
					v-if="item.allow_member_price=='允许' && (goodsMemberLevelNameObj[item.goods_no] && goodsMemberLevelNameObj[item.goods_no].member_three_state=='启用')">
					<view style="flex: 1;margin: 4rpx 0;"> {{ }}</view>
					<view>
						{{goodsMemberLevelNameObj[item.goods_no] && goodsMemberLevelNameObj[item.goods_no].member_three_name}}：¥{{item.new_member_three}}
					</view>

				</view>


				<image src="/static/remove.png" @click.stop="remove(index)"></image>
			</view>
		</scroll-view>
		<view class="total-box flex-row-center">
			共{{goodsList.length}}种商品
			<!-- ，{{getAllQty()}}件商品 -->
		</view>
		<view class="bottom-container flex-row-center">
			<view class="item" @click="save(0)">保存草稿</view>
			<view class="item1" @click="save(1)">提交</view>
		</view>


		<!-- <image class="qrcode-img" src="/static/manage/qrcode2.png" mode="aspectFill" @click="qrcode"></image> -->
		<drag-button :isDock="true" :existTabBar="true" @btnClick="qrcode" @btnTouchstart="btnTouchstart"
			@btnTouchend="btnTouchend" />

		<u-mask :show="remarkDialogShow" mode="center" bgColor="transparent" class="flex-column-center"
			style="justify-content: center;">

			<view class="remark-dialog flex-column">
				<view class="title-box">
					<view class="text">备注</view>
					<image src="/static/close.png" @click.stop="remarkDialogShow=false"></image>
				</view>
				<view class="line"></view>
				<textarea class="input" placeholder="请输入备注" v-model="dialogRemark"></textarea>
				<view class="boottom-btn-box flex-row">
					<view class="left-btn" @click="remarkDialogShow=false">取消</view>
					<view class="right-btn" @click="rightAction">确定</view>
				</view>
			</view>
		</u-mask>
		<u-mask :show="editGoodsDialogShow" mode="bottom" bgColor="transparent" class="flex-column-center"
			style="justify-content: flex-end;" @click="editGoodsDialogShow=false">
			<view v-if="editGoodsDialogShow" @tap.stop>

				<view :class="editGoodsDialogShow?'showDialog':''" @tap.stop>

					<view class="rr" @tap.stop>{{currGoodsInfo.goods_name}}</view>
					<view class="flex-row-center">
						<view class="rr" @tap.stop>{{currGoodsInfo.goods_barcode}}</view>
						<view class="rr" @tap.stop>单位：{{currGoodsInfo.goods_unit_name}}</view>
					</view>


					<view class="flex-row-center">
						<view class="r0" @tap.stop>￥{{ $haveVal(currGoodsInfo.purchase_price,'-')}}
						</view>
						<view class="r1" @tap.stop>进货价： </view>
						<view class="r2 flex-row-center" @tap.stop>￥<input @input="e=> {
										e.target.value =  (e.target.value.match(/^\d*(\.?\d{0,2})/g)[0]) || null
										  $nextTick(() => {
											price0= e.target.value
										  })
									}" placeholder="请输入" v-model="price0" type="digit" />
						</view>
					</view>


					<view class="flex-row-center">
						<view class="r0" @tap.stop>
							￥{{$haveVal(currGoodsInfo.new_sale_price || currGoodsInfo.sale_price, '-')}}
						</view>
						<view class="r1" @tap.stop>新零售价 </view>
						<view class="r2 flex-row-center" @tap.stop>￥<input @input="e=> {
										e.target.value =  (e.target.value.match(/^\d*(\.?\d{0,2})/g)[0]) || null
										  $nextTick(() => {
											price1= e.target.value
										  })
									}" placeholder="请输入" v-model="price1" type="digit" />
						</view>
					</view>


					
			
					<view class="flex-row-center"
						v-if="currGoodsInfo.allow_member_price=='允许' && (goodsMemberLevelNameObj[currGoodsInfo.goods_no] && goodsMemberLevelNameObj[currGoodsInfo.goods_no].member_one_state=='启用')">
						<view class="r0" @tap.stop>￥{{$haveVal(currGoodsInfo.new_member_one) || $haveVal(goodsMemberLevelNameObj[currGoodsInfo.goods_no]?goodsMemberLevelNameObj[currGoodsInfo.goods_no].new_member_one:'-')}}</view>
						<view class="r1" @tap.stop>
							{{goodsMemberLevelNameObj[currGoodsInfo.goods_no] && goodsMemberLevelNameObj[currGoodsInfo.goods_no].member_one_name}}
						</view>
						<view class="r2 flex-row-center" @tap.stop>￥<input @input="e=> {
										e.target.value =  (e.target.value.match(/^\d*(\.?\d{0,2})/g)[0]) || null
										  $nextTick(() => {
											price2= e.target.value
										  })
									}" placeholder="请输入" v-model="price2" type="digit" />
						</view>
					</view>



					<view class="flex-row-center"
						v-if="currGoodsInfo.allow_member_price=='允许' && (goodsMemberLevelNameObj[currGoodsInfo.goods_no] && goodsMemberLevelNameObj[currGoodsInfo.goods_no].member_two_state=='启用')">
						<view class="r0" @tap.stop>￥{{$haveVal(currGoodsInfo.new_member_two) || $haveVal(goodsMemberLevelNameObj[currGoodsInfo.goods_no]?goodsMemberLevelNameObj[currGoodsInfo.goods_no].new_member_two:'-')}}</view>
						<view class="r1" @tap.stop>
							{{goodsMemberLevelNameObj[currGoodsInfo.goods_no] && goodsMemberLevelNameObj[currGoodsInfo.goods_no].member_two_name}}
						</view>
						<view class="r2 flex-row-center" @tap.stop>￥<input @input="e=> {
										e.target.value =  (e.target.value.match(/^\d*(\.?\d{0,2})/g)[0]) || null
										  $nextTick(() => {
											price3= e.target.value
										  })
									}" placeholder="请输入" v-model="price3" type="digit" />
						</view>
					</view>


					<view class="flex-row-center"
						v-if="currGoodsInfo.allow_member_price=='允许' && (goodsMemberLevelNameObj[currGoodsInfo.goods_no] && goodsMemberLevelNameObj[currGoodsInfo.goods_no].member_three_state=='启用')">
						<view class="r0" @tap.stop>￥{{$haveVal(currGoodsInfo.new_member_three) || $haveVal(goodsMemberLevelNameObj[currGoodsInfo.goods_no]?goodsMemberLevelNameObj[currGoodsInfo.goods_no].new_member_three:'-')}}
						</view>
						<view class="r1" @tap.stop>
							{{goodsMemberLevelNameObj[currGoodsInfo.goods_no] && goodsMemberLevelNameObj[currGoodsInfo.goods_no].member_three_name}}
						</view>
						<view class="r2 flex-row-center" @tap.stop>￥<input @input="e=> {
										e.target.value =  (e.target.value.match(/^\d*(\.?\d{0,2})/g)[0]) || null
										  $nextTick(() => {
											price4= e.target.value
										  })
									}" placeholder="请输入" v-model="price4" type="digit" />
						</view>
					</view>




					<view class="bottom-box flex-row-center" @tap.stop>
						<view class="cancel" @click="editGoodsDialogShow=false">取消</view>
						<view class="confirm" @click="confirmEntry">确定</view>
					</view>
				</view>
			</view>
		</u-mask>

	</view>
</template>

<script>
	import {
		fatherAndSonUpdates,
		fatherAndSonAdds
	} from '@/common/api/parameter_tool.js'
	export default {
		data() {
			return {
				editGoodsDialogShow: false,
				currGoodsInfo: {},
				remarkDialogShow: false,
				title: "新增调价",
				remark: "",
				dialogRemark: "",
				currInputNum: '',
				price0: '',
				price1: '',
				price2: '',
				price3: '',
				price4: '',
				goodsList: [],
				info: null,
				inventoryTeypIndex: 1,
				inventoryTeyps: ["覆盖", "累加"],
				goodsMemberLevelNameObj: {},
				delIds: null,
			}
		},
		onLoad(options) {
			if (options.info != null) {
				this.info = JSON.parse(options.info)
				this.title = "编辑调价"
				this.remark = this.info.remark;
				this.dialogRemark = this.info.remark;
				this.getData()
			}
		},
		onShow() {
			let list = uni.getStorageSync("multipleSelectList")
			if (list != null) {
				let goods_no_s = []
				for (let i in list) {
					if (list[i] && list[i].goods_no) {
						goods_no_s.push(list[i].goods_no);
					}
				}

				this.getGoodsesMember(goods_no_s, () => {
					for (let i in list) {
						list[i].id = null;
					}

					let listbars = [];
					for (let i in this.goodsList) {
						listbars.push(this.goodsList[i].goods_barcode);
					}

					for (let i in list) {
						let barcode = list[i].goods_barcode;
						if (listbars.indexOf(barcode) == -1) {
							this.goodsList.push(list[i]);
						}
					}
				})
				uni.setStorageSync("multipleSelectList", null)
			}
		},
		methods: {
			getGoodsesMember(goods_no_s, callback) {
				if (!goods_no_s) {
					if (callback) {
						callback();
					}
					return;
				}

				let data = [];
				goods_no_s.forEach(item => {
					data.push({
						"colName": "goods_no",
						"ruleType": "eq",
						"required": true,
						"value": item
					})
				});


				this.$apiPost("/retail/select/srvretail_goods_info_member_select", {
					"serviceName": "srvretail_goods_info_member_select",
					"colNames": [
						"*"
					],

					relation_condition: {
						"data": [{
							"relation": "OR",
							"data": data
						}],
						"relation": "AND"
					}
				}).then(res => {
					let arr = res.data;
					if (arr) {
						arr.forEach(item => {
							if(item){
								if (!this.goodsMemberLevelNameObj[item.goods_no]) {
									this.goodsMemberLevelNameObj[item.goods_no] = {}
								}

								this.goodsMemberLevelNameObj[item.goods_no] = item
									// .member_level_name
								}
							});
					}
					if (callback) {
						callback();
					}
				}).catch(function() {
					if (callback) {
						callback();
					}
				})
			},

			confirmEntry() {

				this.currGoodsInfo.new_purchase_price = this.$haveVal(this.price0);
				this.currGoodsInfo.new_member_one = this.$haveVal(this.price2);
				this.currGoodsInfo.new_member_two = this.$haveVal(this.price3);
				this.currGoodsInfo.new_member_three = this.$haveVal(this.price4);
				let hint = null;
				if (this.currGoodsInfo.new_purchase_price.length == 0 || parseFloat(this.currGoodsInfo
					.new_purchase_price) <=
					0) {
					// hint = "进货价不能小于0!"
				}

				let new_sale_price = this.$haveVal(this.price1);
				if (new_sale_price.length == 0 || parseFloat(new_sale_price) <= 0) {
					hint = "新零售价不能小于0!"
				}
				// if (this.currGoodsInfo.new_member_one.length > 0 && parseFloat(this.currGoodsInfo.new_member_one) < 0) {
				// 	hint = "价格不可为负数！"
				// }
				// if (this.currGoodsInfo.new_member_two.length > 0 && parseFloat(this.currGoodsInfo.new_member_two) < 0) {
				// 	hint = "价格不可为负数！"
				// }
				// if (this.currGoodsInfo.new_member_three.length > 0 && parseFloat(this.currGoodsInfo.new_member_three) <
				// 	0) {
				// 	hint = "价格不可为负数！"
				// }
				if (this.currGoodsInfo.minimum_price != null) { //设置了最低售价
					if (parseFloat(new_sale_price) < this.currGoodsInfo.minimum_price) {
						hint = "新零售价不能小于最低售价 " + this.currGoodsInfo.minimum_price
					}
				}


				if (hint != null) {
					uni.showToast({
						title: hint,
						icon: 'none'
					})
					return;
				}
				this.currGoodsInfo.new_sale_price = new_sale_price;
				this.editGoodsDialogShow = false;
			},
			itemOnClick(item) {
				// item.new_member_one = '';
				// item.new_member_two = '';
				// item.new_member_three = '';
				// console.error('item=', item);
				try {
					console.error('vip_val_arr=', item.discount_jso);
					let vip_val_arr = JSON.parse(item.discount_json)
					if (vip_val_arr) {
						for (let i = 0; i < vip_val_arr.length; i++) {
							switch (i) {
								case 0:
									item.member_one = vip_val_arr[i].member_discount_amount;
									break;
								case 1:
									item.member_two = vip_val_arr[i].member_discount_amount;
									break;
								case 2:
									item.member_three = vip_val_arr[i].member_discount_amount;
									break;

								default:
									break;
							}

						}
					}
				} catch (error) {

				}
				this.currGoodsInfo = item;
				this.price0 = this.$haveVal(this.currGoodsInfo.new_purchase_price || this.currGoodsInfo.purchase_price);
				this.price1 = this.$haveVal(this.currGoodsInfo.new_sale_price || this.currGoodsInfo.sale_price);
				this.price2 =  this.$haveVal(this.currGoodsInfo.new_member_one) || this.$haveVal(this.goodsMemberLevelNameObj[item.goods_no]?this.goodsMemberLevelNameObj[item.goods_no].new_member_one:'');
				this.price3 =  this.$haveVal(this.currGoodsInfo.new_member_two) || this.$haveVal(this.goodsMemberLevelNameObj[item.goods_no]?this.goodsMemberLevelNameObj[item.goods_no].new_member_two:'');
				this.price4 =  this.$haveVal(this.currGoodsInfo.new_member_three) || this.$haveVal(this.goodsMemberLevelNameObj[item.goods_no]?this.goodsMemberLevelNameObj[item.goods_no].new_member_three:'');
				
				// this.currGoodsInfo.new_member_one = this.price2;
				// this.currGoodsInfo.new_member_two = this.price3;
				// this.currGoodsInfo.new_member_three = this.price4;
				
				this.editGoodsDialogShow = true;
				
			},
			rightAction() {
				this.remark = this.dialogRemark;
				this.remarkDialogShow = false;
			},
			getAllQty() {
				let countQty = 0;
				for (let i in this.goodsList) {
					countQty += parseInt(this.goodsList[i].inventory_num ?? '0')
				}
				return countQty;
			},
			remove(index) {
				if (this.delIds == null) this.delIds = []
				this.delIds.push(this.goodsList[index].id)
				this.goodsList.splice(index, 1)
			},
			qrcode() {
				// this.qrcodeSearch("1667031567808")
				let ths = this;
				dsBridge.call("QRCode", {}, function(res) {
					if (res) {
						ths.qrcodeSearch(res)

					}
				})
			},
			qrcodeSearch(qrcode) {
				uni.showLoading({
					title: "加载中..."
				})
				this.$apiPost("/retail/select/srvretail_goods_info_select", {
					serviceName: "srvretail_goods_info_select",
					condition: [{
						"colName": "goods_barcode",
						"ruleType": "like",
						"value": qrcode
					}],
					page: {
						"pageNo": 1,
						"rownumber": 500
					},
					"colNames": ["*"]
				}).then(res => {
					uni.hideLoading()
					if (res.data.length > 0) {
						// res.data[0].id = null
						// for (let i in this.goodsList) {
						// 	if (this.goodsList[i].goods_barcode == qrcode) {
						// 		this.goodsList[i].inventory_num = (parseInt(this.goodsList[i].inventory_num ??
						// 			"1") + 1) + ""
						// 		return;
						// 	}
						// }
						// res.data[0].inventory_num = "1"

						let list = res.data;
						for (let i in list) {
							list[i].id = null;
						}
						let listbars = [];
						for (let i in this.goodsList) {
							listbars.push(this.goodsList[i].goods_barcode);
						}

						for (let i in list) {
							let barcode = list[i].goods_barcode;
							if (listbars.indexOf(barcode) == -1) {
								this.goodsList.push(list[i]);
							}
						}
						// res.data[0].id = null;
						// this.goodsList.push(res.data[0])
					} else {
						this.$showToast('没有找到该条码')
					}
				})
			},
			save(type) { //type 0 保存草稿，1 提交。

				if (this.goodsList.length == 0) {
					this.$showToast("请选择商品！")
					return;
				}

				let hint = null;
				let datas = [];
				for (let i in this.goodsList) {
					let item = this.goodsList[i]
					let vip = item.allow_member_price == "允许"
					if (vip && this.$isZero(item.new_member_one) && this.goodsMemberLevelNameObj[item.goods_no] && this
						.goodsMemberLevelNameObj[item.goods_no].member_one_state == '启用') {
						this.$showToast(this.goodsMemberLevelNameObj[item.goods_no].member_one_name + "会员价不能为空！")
						return;
					}
					if (vip && this.$isZero(item.new_member_two) && this.goodsMemberLevelNameObj[item.goods_no] && this
						.goodsMemberLevelNameObj[item.goods_no].member_two_state == '启用') {
						this.$showToast(this.goodsMemberLevelNameObj[item.goods_no].member_two_name + "会员价不能为空！")
						return;
					}
					if (vip && this.$isZero(item.new_member_three) && this.goodsMemberLevelNameObj[item.goods_no] && this
						.goodsMemberLevelNameObj[item.goods_no].member_three_state == '启用') {
						this.$showToast(this.goodsMemberLevelNameObj[item.goods_no].member_three_name + "会员价不能为空！")
						return;
					}
					if (this.$isZero(item.new_sale_price)) {
						this.$showToast("新零售价不能为空！")
						return;
					}
					// if (this.$isZero(item.new_purchase_price)) {
					// 	this.$showToast("新进货价不能为空！")
					// 	return;
					// }


					if (item.minimum_price != null) { //设置了最低售价
						if (parseFloat(item.new_sale_price + "") < item.minimum_price) {
							hint = "新零售价不能小于最低售价 " + item.minimum_price
						}
					}


					if (hint != null) {
						uni.showToast({
							title: hint,
							icon: 'none'
						})
						return;
					}


					let parmas = {
						"id": item.id,
						"goods_no": item.goods_no,
						"goods_barcode": item.goods_barcode,
						"goods_name": item.goods_name,
						"new_purchase_price": item.new_purchase_price || 0,
						"new_sale_price": item.new_sale_price,
						// "new_member_one": item.new_member_one,
						// "new_member_two": item.new_member_two,
						// "new_member_three": item.new_member_three,
					};
					if (vip) {
						if (item.new_member_one != '') {
							parmas["new_member_one"] = item.new_member_one
						}
						if (item.new_member_two != '') {
							parmas["new_member_two"] = item.new_member_two
						}
						if (item.new_member_three != '') {
							parmas["new_member_three"] = item.new_member_three
						}
					}
					datas.push(parmas)
				}




				uni.showLoading({
					title: "加载中..."
				})

				var params = undefined;
				if (this.info?.id == undefined) { //add
					params = fatherAndSonAdds("srvretail_modify_price_record_add", "srvretail_modify_price_detail_add",
						"modify_price_no", "type", type == 0 ? '待提交' : '已提交', datas)
				} else {
					params = fatherAndSonUpdates("srvretail_modify_price_record_update", this.info.id,
						"srvretail_modify_price_detail_update",
						"modify_price_no", "type", type == 0 ? '待提交' : '已提交', datas)
				}
				params[0].data[0].remark = this.remark;


				if (this.delIds != null) {
					var delparList = [];
					for (let i in this.delIds) {
						delparList.push({
							serviceName: "srvretail_modify_price_detail_delete",
							condition: [{
								"colName": "id",
								"ruleType": "eq",
								"value": this.delIds[i]
							}],
							"depend_keys": [{
								"type": "column",
								"add_col": "modify_price_no",
								"depend_key": "modify_price_no"
							}]

						})
					}
					params[0].data[0].child_data_list.push(...delparList)
				}

				this.$apiPost(this.info == null ? "/retail/operate/srvretail_modify_price_record_add" :
					"/retail/operate/srvretail_modify_price_record_update", params).then(res => {
					uni.hideLoading()
					uni.setStorageSync("refresh", true)
					if (res.state == "SUCCESS") {
						uni.showToast({
							title: "成功！",
							mask: true
						})

						setTimeout(() => {
							uni.navigateBack()
						}, 1500)
					}
				})

			},

			getData() {
				uni.showLoading({
					title: "加载中..."
				})
				this.$apiPost("/retail/select/srvretail_modify_price_detail_select", {
					"serviceName": "srvretail_modify_price_detail_select",
					"colNames": ["*"],
					"condition": [{
						"colName": "modify_price_no",
						"ruleType": "eq",
						"value": this.info.modify_price_no
					}],
					"relation_condition": {},
					"page": {
						"pageNo": 1,
						"rownumber": 500
					}
				}).then(res => {
					uni.hideLoading()
					if (res.data && res.data.length) {
						let arr = [];
						res.data.forEach(element => {
							arr.push(element.goods_no)
						});
						this.getGoodsesMember(arr, () => {
							this.goodsList = res.data;
						})
					} else {
						this.goodsList = res.data;
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.head-contaienr {
		background-color: white;

		.item {
			padding: 20rpx 20rpx;

			.value {
				flex: 1;
				font-size: 32rpx;
				font-weight: 500;
				color: rgba(51, 51, 51, 1);
			}
		}

		.bluebtn {
			width: 124rpx;
			height: 48rpx;
			text-align: center;
			line-height: 48rpx;
			border-radius: 4rpx;
			border: 2rpx solid rgba(56, 192, 158, 1);
			margin-right: 22rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: rgba(56, 192, 158, 1);
		}

		.redbtn {
			width: 124rpx;
			height: 48rpx;
			text-align: center;
			line-height: 48rpx;
			border-radius: 4rpx;
			border: 2rpx solid rgba(212, 48, 48, 1);
			margin-right: 22rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: rgba(212, 48, 48, 1);
		}
	}

	.head-item {
		padding-left: 20rpx;
		padding-right: 24rpx;
		min-height: 100rpx;
		background-color: white;
		margin-bottom: 2rpx;

		.title1 {
			font-size: 32rpx;
			font-weight: 500;
			color: rgba(0, 0, 0, 1);
		}


		.title {
			font-size: 32rpx;
			font-weight: 500;
			color: rgba(0, 0, 0, 1);
			flex: 1;
		}

		.value {
			flex: 1;
			text-align: end;
			font-size: 28rpx;
			font-weight: 500;
		}

		image {
			margin-left: 16rpx;
			width: 8rpx;
			height: 16rpx;

		}

		.add-goods {
			box-sizing: content-box;
			width: 160rpx;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			border-radius: 60rpx;
			border: 1px solid rgba(212, 48, 48, 1);
			font-size: 30rpx;
			font-weight: 400;
			color: rgba(212, 48, 48, 1);
		}
	}

	.remark-dialog {
		width: 560rpx;
		justify-content: center;
		border-radius: 20rpx;
		background: rgba(255, 255, 255, 1);
		padding-top: 34rpx;

		.title-box {
			font-size: 18px;
			font-weight: 700;
			color: rgba(51, 51, 51, 1);
			position: relative;

			.text {
				width: 540rpx;
				text-align: center;
			}

			image {
				width: 52rpx;
				position: absolute;
				right: 10rpx;
				top: 0;
				height: 52rpx;
			}
		}

		.line {
			margin-top: 14rpx;
			height: 2rpx;
			width: 100%;
			background-color: rgba(225, 225, 225, 1);
		}

		.input {
			width: 464rpx;
			height: 210rpx;
			margin-left: 48rpx;
			margin-top: 44rpx;
			margin-bottom: 60rpx;
			border: 2rpx solid rgba(241, 241, 241, 1);
			padding: 20rpx;
			box-sizing: border-box;
			color: rgba(153, 153, 153, 1);
			font-size: 24rpx;
			font-weight: 500;
		}


		.boottom-btn-box {
			width: 100%;
			height: 100rpx;
			border-radius: 0 0 20rpx 20rpx;
			font-size: 36rpx;
			font-weight: 700;
			border-top: 2rpx solid rgba(224, 222, 222, 1);

			.left-btn {
				flex: 1;
				line-height: 100rpx;
				text-align: center;
				color: rgba(56, 192, 158, 1);
				border-right: 1rpx solid rgba(224, 222, 222, 1);
			}

			.right-btn {
				flex: 1;
				line-height: 100rpx;
				text-align: center;
			}
		}
	}

	.total-box {
		padding-left: 24rpx;
		height: 80rpx;
		opacity: 1;
		background: rgba(227, 227, 227, 1);
		font-size: 24rpx;
		font-weight: 500;
		color: rgba(0, 0, 0, 1);
	}

	.item-view {
		padding: 26rpx 20rpx 0 24rpx;
		padding-bottom: 18rpx;
		background: rgba(255, 255, 255, 1);
		border-bottom: 2rpx solid rgba(245, 245, 247, 1);
		;
		position: relative;

		.name {
			flex: 1;
			font-size: 28rpx;
			font-weight: 700;
			color: rgba(51, 51, 51, 1);

		}

		view {
			margin-left: 0;
			flex: 1.1;
			font-size: 28rpx;
			font-weight: 500;
			color: rgba(51, 51, 51, 1);
			margin-right: 25rpx;
		}



		image {
			width: 40rpx;
			height: 40rpx;
			position: absolute;
			right: 24rpx;
			top: 66rpx;
		}
	}

	.qrcode-img {
		width: 140rpx;
		height: 140rpx;
		position: fixed;
		bottom: 268rpx;
		right: 24rpx;
	}

	.bottom-container {
		background-color: white;
		box-shadow: 0 -16rpx 16rpx 1rpx #00000008;
		height: 146rpx;
		padding: 0 24rpx;
		justify-content: space-around;

		.item {
			border-radius: 40rpx;
			line-height: 80rpx;
			text-align: center;
			border: 2rpx solid #333333FF;
			width: 192rpx;
			height: 80rpx;
			font-size: 30rpx;
			font-weight: 500;

		}

		.item1 {
			border-radius: 40rpx;
			line-height: 80rpx;
			text-align: center;
			border: 2rpx solid rgba(56, 192, 158, 1);
			background-color: rgba(56, 192, 158, 1);
			color: white;
			width: 192rpx;
			height: 80rpx;
			font-size: 30rpx;
			font-weight: 500;
		}

		.text {
			flex: 1;
			margin-left: 60rpx;
			font-size: 30rpx;
			font-weight: 700;

		}

		.btn {
			margin-right: 34rpx;
			width: 192rpx;
			height: 80rpx;
			border-radius: 40rpx;
			background: rgba(56, 192, 158, 1);
			font-size: 30rpx;
			font-weight: 700;
			color: white;
			text-align: center;
			line-height: 80rpx;
		}
	}


	.showDialog {
		animation: showDialog 0.3s ease-out;
		padding-top: 54rpx;
		width: 750rpx;
		border-radius: 40rpx 40rpx 0 0;
		background: rgba(255, 255, 255, 1);

		.rr {
			min-width: 400rpx;
			padding-left: 44rpx;
			margin-bottom: 20rpx;
			font-size: 30rpx;
			font-weight: 500;
			color: rgba(0, 0, 0, 1);


		}


		.r0 {
			min-width: 160rpx;
			padding-left: 44rpx;
			margin-bottom: 20rpx;
			font-size: 30rpx;
			font-weight: 500;
			color: rgba(0, 0, 0, 1);
		}

		.r1 {
			flex: 1;
			padding-left: 44rpx;
			margin-bottom: 20rpx;
			font-size: 30rpx;
			font-weight: 500;
			color: rgba(0, 0, 0, 1);


			input {
				width: 160rpx;
				height: 48rpx;
				line-height: 48rpx;
				padding: 0 5rpx;
				font-size: 28rpx;
				opacity: 1;
				border-radius: 4rpx;
				border: 1px solid rgba(153, 153, 153, 1);
			}
		}

		.r2 {
			margin-right: 120rpx;
			min-width: 246rpx;
			padding-left: 44rpx;
			margin-bottom: 20rpx;
			font-size: 30rpx;
			font-weight: 500;
			color: rgba(0, 0, 0, 1);


			input {
				width: 160rpx;
				height: 48rpx;
				line-height: 48rpx;
				padding: 0 5rpx;
				font-size: 28rpx;
				opacity: 1;
				border-radius: 4rpx;
				border: 1px solid rgba(153, 153, 153, 1);
			}
		}

		.bottom-box {
			margin-top: 55rpx;
			box-shadow: 0 -32rpx 32rpx 2rpx rgba(245, 245, 247, 1);

			.cancel {
				flex: 1;
				height: 146rpx;
				line-height: 146rpx;
				text-align: center;
				font-size: 32rpx;
				font-weight: 700;
				color: black;
				background-color: white;
			}

			.confirm {
				flex: 1;
				height: 146rpx;
				line-height: 146rpx;
				text-align: center;
				font-size: 32rpx;
				font-weight: 700;
				color: white;
				background-color: rgba(56, 192, 158, 1);
				;
			}
		}

	}

	// 呼吸帧
	@keyframes showDialog {
		0% {
			transform: translate(0%, 100%);
		}

		100% {
			transform: translate(0%, 0%);
		}

	}
</style>
